<template>
  <view class="my-5 mx-3 ">
    <view class="bg-gray-200 p-1 rounded">
      <RowCell left-label="到期时间">
        <view class="text-xl text-pink-500">
          {{ expireDate }}
        </view>
      </RowCell>
      <RowCell :left-label="dValue>=0?'剩余（天）':'已过期（天）'">
        <view class="text-xl font-bold" :class="dValue>=0?'text-green-500':'text-red-500'">
          {{ Math.abs(dValue)}}
        </view>
      </RowCell>
    </view>
    <view class="p-1 mt-12 bg-gray-200 rounded">
      <RowCell left-label="生产日期">
        <picker mode="date" :value="produceDate" @change="handleProducedDateChange">
          <view class="uni-input">{{ produceDate }}</view>
        </picker>
      </RowCell>
    </view>
    <view class="p-1 mt-2 bg-gray-200 rounded">
      <RowCell left-label="保质期">
        <NumberStep v-model:value="validNum" @change="handle"></NumberStep>
      </RowCell>
    </view>
    <view class="p-1 mt-2 bg-gray-200 rounded">
      <RowCell left-label="单位类型">
        <UnitRadio v-model:value="unit" @change="handle"></UnitRadio>
      </RowCell>
    </view>
  </view>



</template>

<script setup lang="ts">

import {ref} from "vue";
import RowCell from "@/pages/date-calculate/components/RowCell.vue";
import myDayjs from "@/utils/common/myDayjs";
import NumberStep from "@/pages/date-calculate/components/NumberStep.vue";
import UnitRadio from "@/pages/date-calculate/components/UnitRadio.vue";

const produceDate = ref(myDayjs().format('YYYY-MM-DD'));
const expireDate = ref('');
const validNum = ref(0);
const unit = ref('天');
const dValue = ref(0);

const handleProducedDateChange = (e: any) => {
  produceDate.value = e.detail.value;
  handle()
}

const handle = () => {
  if(validNum.value===0) {
    expireDate.value = produceDate.value
    dValue.value = 0
    return
  }
  if (unit.value === '天') {
    expireDate.value = myDayjs(produceDate.value).add(validNum.value - 1, 'days').format('YYYY-MM-DD')
  } else if (unit.value === '周') {
    expireDate.value = myDayjs(produceDate.value).add(validNum.value * 7 - 1, 'days').format('YYYY-MM-DD')
  } else if (unit.value === '月') {
    expireDate.value = myDayjs(produceDate.value).add(validNum.value * 30 - 1, 'days').format('YYYY-MM-DD')
  } else if (unit.value === '年') {
    expireDate.value = myDayjs(produceDate.value).add(validNum.value * 365 - 1, 'days').format('YYYY-MM-DD')
  }
  dValue.value = myDayjs(expireDate.value).add(1, 'days').diff(myDayjs(), 'days')
}

</script>

<style scoped>

</style>